<template>
	<div>
		<section class="top-nav" >
			首页
		</section>
		<div class="" style="box-sizing: border-box;border: 6px solid white;">

			<!--<section class="" style="width: 100%;">
				<mu-icon value="account_circle" color="white" style="padding-right: 0.4rem;" />
				<input type="text" placeholder=""   />
			</section>-->
			<!--<section class="search-frame center-mid" >
				<mu-icon value="search" color="#bbbbbb" style="padding:0 0.4rem;" />
				<input type="text" placeholder="搜索一切"   />
			</section>-->
			<section style=" height: 12rem;margin-top:0.6rem ;">
				
				  <swiper :options="swiperOption" ref="mySwiper"  class="swiper-box">
				    <swiper-slide class="swiper-item">
				    	<p class="swiperTitle" ></p>
				    	<img class="swiperImg" :src="swiperItem1"  />
				    </swiper-slide>
				    <swiper-slide class="swiper-item">
				    	<p class="swiperTitle" ></p>
				    	<img class="swiperImg" :src="swiperItem2"  />
				    </swiper-slide>
				    <swiper-slide class="swiper-item">
				    	<p class="swiperTitle" ></p>
				    	<img class="swiperImg" :src="swiperItem3" />
				    </swiper-slide>
				    <!-- Optional controls -->
				    <div class="swiper-pagination"  slot="pagination"></div>
				    <!--<div class="swiper-button-prev" slot="button-prev"></div>
				    <div class="swiper-button-next" slot="button-next"></div>-->
				    <!--<div class="swiper-scrollbar"   slot="scrollbar"></div>-->
				  </swiper>
				
				
			</section>
			
			<!--<section style="background-color:#f6f6f6;height: 4.6rem;margin-top:0.6rem;display: flex;flex-direction: row; ">
				<section style="height: 100%;flex: 1;background-color: #ffda58;"></section>
				<span style="width:0.4rem;height: 100%;"></span>
				<section style="height: 100%;flex: 1;background-color: #98dcff;"></section>
			</section>-->
			
			<section style="background-color:white;height: 4.8rem;margin-top:0.6rem;display: flex;flex-direction: row; ">
				<section style="flex: 1.5;background:#f6f6f6 ;">
					
				</section>
				<span style="flex: 0.1;"></span>
				<swiper :options="swiperNews" ref="mySwiper2"  class="swiper-box" style="flex: 7;">
				    <swiper-slide class="swiper-item-news">
				    	<a title="2018中国水泥网年会时间敲定！" href="http://www.ccement.com/news/content/9383098669687.html" target="_blank">
                    2018中国水泥网年会时间敲定！</a>
				    </swiper-slide>
				    <swiper-slide class="swiper-item-news">
				    	<a title="“一带一路上的湖北故事” 放飞“塔吉克山鹰”" href="http://www.ccement.com/news/content/9391486342702.html" target="_blank">
                “一带一路上的湖北故事” 放飞“塔吉克山鹰”
            </a>
				    </swiper-slide>
				    <swiper-slide class="swiper-item-news">
				    	<a href="http://magazine.ccement.com/NewsDetails.aspx?id=30800" target="_blank" title="宋志平：打造世界建材航母 引领中国水泥走向世界" class="nametxt">
                    宋志平：打造世界建材航
                </a>
				    </swiper-slide>
				    <swiper-slide class="swiper-item-news">
				    	祝各位司机师傅一路平安
				    </swiper-slide>
				    <!-- Optional controls -->
				    <!--<div class="swiper-pagination"  slot="pagination"></div>-->
				    <!--<div class="swiper-button-prev" slot="button-prev"></div>
				    <div class="swiper-button-next" slot="button-next"></div>-->
				    <!--<div class="swiper-scrollbar"   slot="scrollbar"></div>-->
				</swiper>
				
				
			</section>
			
			
			<section style="text-align: left;color: #9b9b9b;height: 4rem;font-size: 1rem;line-height: 4rem;">
				功能模块
			</section>
			<section class="btn-container" style="display: flex;flex-direction: row;">
				<section class="btn-index" @click="gotoAddress({path:'factoryList'})">
					<mu-icon :size="28" value="list" color="#3ea1ec" />
					<span style="color: #bbbbbb;">我的工厂</span>
				</section>
				<section class="btn-index">
					<mu-icon :size="28" value="directions_bus" color="#3ea1ec" />
					<span style="color: #bbbbbb;">敬请期待</span>
				</section>
				<br/>
				
				<!--<section class="btn-index" @click="gotoAddress({path:'orderList'})" >
					<mu-icon :size="28" value="local_shipping" color="#3ea1ec" />
					<span style="color: #bbbbbb;">销售订单</span>
				</section>
				<section class="btn-index">
					<mu-icon :size="28" value="list" color="#3ea1ec" />
					<span style="color: #bbbbbb;">销售车辆</span>
				</section>-->
			</section>
			
			<section class="btn-container" style="display: flex;flex-direction: row;margin-top: 0.4rem;">
				<section class="btn-index"  @click="cancel()">
					<mu-icon :size="28" value="local_shipping" color="#3ea1ec" />
					<span style="color: #bbbbbb;">注销</span>
				</section>
				<section class="btn-index">
				</section>
			</section>
			
			
			<section style="text-align: left;color: #9b9b9b;height: 2rem;font-size: 0.7rem;line-height: 4rem;">
				
				
				<span style="flex: 0.1;">身份码:</span><label>{{openid}}</label>
				<!--<label v-model="openid"></label>-->
				<mu-flat-button class="mu-btn" type="button" v-clipboard:copy="openid" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</mu-flat-button>
			</section>
			
			<section style="text-align: left;color: #9b9b9b;height: 2rem;font-size: 0.5rem;line-height: 4rem;">
				
				
				<span style="flex: 0.1;">版本号:</span><label>{{version}}</label>
			</section>
			
			
			
			<!--<section class="btn-container" style="margin-top:0.4rem;display: flex;flex-direction: row;">
				<section class="btn-index"></section>
				<section class="btn-index"></section>
				<section class="btn-index"></section>
				<section class="btn-index"></section>
			</section>-->
		</div>
	</div>
</template>

<script>


	export default{
		data(){
			return{
				openid:'',
				version:'',
				swiperOption: {
		          direction: 'horizontal',
		          slidesPerView: 1,
		          paginationClickable: true,
		          spaceBetween: 0,
//		          mousewheelControl: true,
//		          paginationType: 'custom',
		          slidesPerGroup: 1,
		          speed:400,
		          autoplay:{
		          	delay:3200,
		          	stopOnLastSlide: false,
		          	disableOnInteraction: false,
		          },
		          loop:true,
				  pagination: {
				    el: '.swiper-pagination',
				    type: 'bullets',
				    clickable :true,
				  },
		        },
		        swiperNews: {
		          direction: 'vertical',
		          slidesPerView: 2,
		          paginationClickable: true,
		          spaceBetween: 0,
//		          mousewheelControl: true,
//		          paginationType: 'custom',
		          slidesPerGroup: 2,
		          speed:400,
		          autoplay:{
		          	delay:2800,
		          	stopOnLastSlide: false,
		          	disableOnInteraction: false,
		          },
		          loop:true,
//				  pagination: {
//				    el: '.swiper-pagination',
//				    type: 'bullets',
//				    clickable :true,
//				  },
		        },
//		        swiperItem1:'/phone/img/zhuce1.jpg',
//		        swiperItem2:'/phone/img/zhuce2.jpg',
//		        swiperItem3:'/phone/img/lu1.jpg'
                swiperItem1: require("../../static/images/tu01.jpg"),
                swiperItem2: require("../../static/images/tu02.jpg"),
                swiperItem3: require("../../static/images/tu03.jpg")
			}
		},
		mounted(){
			//this.getVersion()
			//获取版本号注释
		     this.version=window.localStorage.version
			this.getOpenid()
		},
		methods:{
			
			onCopy:function(e){
				//console.log('复制成功')
				this.$toast.center('复制身份码成功')

			},
			
			onError:function(e){
				console.log(e)
				this.$toast.center('复制失败')
				//alert('复制失败')
			},
//			getVersion(){
//				this.version = window.localStorage.version
//			},
			getOpenid(){
				
				this.openid = localStorage.userNumber
				//this.openid =this.GLOBAL.openid

			},
			gotoAddress(path){
				var self=this
				setTimeout(function(){
					self.$router.push(path)
				},200)
			},
			cancel(){
				
				let that=this
				this.$confirm('请确认是否注销?', '提示', {
          			confirmButtonText: '注销',
          			cancelButtonText: '取消',
          			center:true,
          			type: 'warning'
        		}).then(() => {
	      				console.info('注销了')
	      				that.axios.post('/Login/logout',{

	      				}).then(function(response){
							that.gotoAddress('login2')
							that.$message({type: 'success',message: '注销成功!',duration:1500})

	      				}).catch(function(error){
	      			 		console.log(error)
	      			 		that.gotoAddress('login2')
							that.$message({type: 'success',message: '注销成功!',duration:1500})
	      				})
					
        			}).catch(() => {
        				//that.gotoAddress('login2')
					});
			}
		}
	}
</script>

<style scoped>
	

.mu-btn{
	width: 3.6rem;
	height: 1.4rem;
	background: #f6f6f6;
	color: #bbbbbb;
	font-size: 0.8rem;
	min-width: 3rem;
}	
	
.swiperTitle{
	color: white;
	position: relative;
	z-index: 15;
	font-size: 1.2rem;
}
.swiperImg{
	width: 100%;
	position:absolute;
	left: 0;
	top: 0;
	z-index: 10;
}
.swiper-box {
    width: 100%;
    height: 100%;
    /*margin: 0 auto;*/
   margin: 0;
  }
  .swiper-item {
  	background-color:#f6f6f6 ;
    height: 100%;
    text-align: center;
    position: relative;
    /*font-size: 18px ;*/
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }	
.swiper-item-news{
	background-color:#f6f6f6 ;
    height: 2.4rem;
    width: 100%;
    font-size: 0.8rem;
    text-align: left;
    line-height: 2.4rem;
    position: relative;
    display: block;
    text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden;
	text-indent: 1rem;
    /*font-size: 18px ;*/
    /* Center slide text vertically */
    /*display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;*/
}
.btn-container .btn-index:nth-child(1){
	border-right:0.2rem solid white;
}
.btn-container .btn-index:nth-child(2),.btn-container .btn-index:nth-child(3){
	border-left:0.2rem solid white ;
	border-right:0.2rem solid white;
}
.btn-container .btn-index:nth-child(4){
	border-left:0.2rem solid white;
}
.btn-index{
	background: #f6f6f6;
	height: 5.6rem;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.top-nav{
	top: 0;
	left: 0; 
	height: 3rem;
	background: white;
	border-bottom: 1px solid #e5e5e5;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.2rem;
	color: #7a7a7a;
	border-bottom:1px solid #e5e5e5 ;
}
.loginBg{
	width: 86%;
	height: 100%;
	/*background: skyblue;*/
}
.center-mid{
	justify-content: center;
	align-items: center;
}
.search-frame{
	background-color:#f1f1f1;
	display: flex; 
	flex-direction: row; 
	font-size: 1rem;
	padding: 0;
	font-family: "微软雅黑";
	border: 1px solid #f0f0f0;
	border-radius: 3px;
}
/*.search-frame:nth-child(1){
	border-bottom: 1px solid #b5b3be;
}*/


.search-frame label{
	flex: 1.2; 
	color: #9e9e9e;
	text-align: center;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 50px white inset;
/*border: 1px solid #CCC!important;*/
}
.search-frame label{
	color:#989898
}
.search-frame input{
	flex: 6; 
	height: 2.6rem; 
	border: none; 
	outline: none; 
	background-color: rgba(255,255,255,0);
	caret-color:#bbbbbb;
	color:#bbbbbb !important;
	 /*-webkit-box-shadow: 0 0 0 0.8rem #fff inset;*/
}
</style>